<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章 - 回声网络</title>
    <style>
        .container { width: 800px; margin: 50px auto; }
        .form-group { margin: 20px 0; }
        label { display: block; margin-bottom: 8px; font-weight: bold; }
        input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        textarea { height: 300px; resize: vertical; }
        .btn-submit { background: #007bff; color: white; border: none; padding: 12px 20px; cursor: pointer; }
        .btn-submit:hover { background: #0056b3; }
        .error-msg { color: red; margin: 10px 0; }
        .btn-back { background: #6c757d; color: white; border: none; padding: 12px 20px; cursor: pointer; margin-right: 10px; text-decoration: none; display: inline-block; }
        .btn-back:hover { background: #5a6268; }
        /* 调试用样式 */
        .null-value { color: #ff6b6b; font-weight: bold; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { text-align: left; padding: 8px; }
        th { background-color: #4CAF50; color: white; }
        tr:nth-child(even) { background-color: #f2f2f2; }
    </style>
</head>
<body>
<div class="container">
    <h1>发布新文章</h1>
    <div class="error-msg" th:text="${errorMsg}"></div>
    <div class="debug-info" style="background-color: #f8f9fa; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
<!--        <h3>调试信息</h3>-->
<!--        <p>测试属性存在: <span th:text="${testAttribute != null}"></span></p>-->
<!--        <p th:if="${testAttribute != null}" th:text="'测试属性值: ' + ${testAttribute}"></p>-->
<!--        <p>分类列表对象: <span th:text="${categories}"></span></p>-->
<!--        <p>分类列表存在: <span th:text="${categories != null}"></span></p>-->
<!--        <p>分类列表大小: <span th:text="${categories.size()}"></span></p>-->
<!--        <p>categories == null: <span th:text="${categories == null}"></span></p>-->
<!--        <p>categories.isEmpty(): <span th:text="${categories.isEmpty()}"></span></p>-->
<!--        -->
<!--        <h5>分类列表详情:</h5>-->
<!--        <ul>-->
<!--            <li th:each="category, stat : ${categories}" th:text="'索引 ' + ${stat.index} + ': ID=' + ${category.getCategoryId()} + ', 名称=' + ${category.getCategoryName()}"></li>-->
<!--        </ul>-->
<!--        -->
<!--        <h5>原始分类数据:</h5>-->
<!--        <div th:each="category : ${categories}">-->
<!--            <div th:text="'Category对象: ' + ${category}"></div>-->
<!--            <div th:text="'ID: ' + ${category.getCategoryId()}"></div>-->
<!--            <div th:text="'Name: ' + ${category.getCategoryName()}"></div>-->
<!--            <hr/>-->
<!--        </div>-->
<!--    </div>-->
    
    <form action="/echo-network/publishArticle" method="post">
        <div class="form-group">
            <label for="title">文章标题</label>
            <input type="text" id="title" name="title" required placeholder="请输入标题（不超过100字）" maxlength="100" th:value="${title}">
        </div>
        <div class="form-group">
            <label for="content">文章内容（支持Markdown）</label>
            <textarea id="content" name="content" required placeholder="请输入文章内容" th:text="${content}"></textarea>
        </div>
        <div class="form-group">
            <label for="categoryIds">选择分类（可多选）</label>
            <!-- 分类选择下拉框 -->
<!--                <div style="border: 1px solid blue; padding: 10px; margin-bottom: 10px;">-->
<!--                   <p style="color: blue; font-weight: bold;">下拉框调试信息:</p>-->
<!--                   <p>categories变量存在: <span th:text="${categories != null}"></span></p>-->
<!--                    <p>分类数量: <span th:text="${#lists.size(categories)}"></span></p>-->
<!--                </div>-->
                <select id="categoryIds" name="categoryIds" multiple required style="height: 150px; width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="" disabled selected>-- 请选择分类 --</option>
                    <th:block th:each="category : ${categories}">
                        <option th:value="${category.getCategoryId()}" th:text="${category.getCategoryName()}">选项</option>
                    </th:block>
                </select>
            <small>按住Ctrl键可多选</small>
        </div>
        <a href="/echo-network/profile-show" class="btn-back">返回列表</a>
        <button type="submit" class="btn-submit">发布文章</button>
    </form>
</div>
</body>
</html>